<template>
  <div class="containt">
    <el-form label-position="right" label-width="200px" class="form-self" :model="form" ref="formRef" :rules="rules">
      <el-form-item label="秒杀订单超过:" prop="flashOrderOvertime">
        <el-input v-model.number="form.flashOrderOvertime">
          <template #append>
            分
          </template>
        </el-input>
        <span>未付款，订单自动关闭</span>
      </el-form-item>
      <el-form-item label="正常订单超过:" prop="normalOrderOvertime">
        <el-input v-model.number="form.normalOrderOvertime">
          <template #append>
            分
          </template>
        </el-input>
        <span>未付款，订单自动关闭</span>
      </el-form-item>
      <el-form-item label="发货超过:" prop="confirmOvertime">
        <el-input v-model.number="form.confirmOvertime">
          <template #append>
            天
          </template>
        </el-input>
        <span>未收货，订单自动完成</span>
      </el-form-item>
      <el-form-item label="订单完成超过:" prop="finishOvertime">
        <el-input v-model="form.finishOvertime">
          <template #append>
            天
          </template>
        </el-input>
        <span>自动结束交易，不能申请售后</span>
      </el-form-item>
      <el-form-item label="订单完成超过:" prop="commentOvertime">
        <el-input v-model.number="form.commentOvertime">
          <template #append>
            天
          </template>
        </el-input>
        <span>自动五星好评</span>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="submit(formRef)" :plain="true">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import * as api from '../../json/request/api'
import type { IOrdersetting} from '../../json/request/QmsAdminConreiller/index'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';

  let formRef = ref<FormInstance>()
  // 订单设置绑定数据
  let form = ref({
    flashOrderOvertime:null,
    normalOrderOvertime:null,
    confirmOvertime:null,
    finishOvertime:null,
    commentOvertime:null,
    id:1
  })
  // 获取设置数据
  const getSetting = async function(){
    const result = await api.admin.orderSetting(form.value)
    console.log(result);
    
    form.value = result
    console.log(form);
    
  }
  // 更新订单设置
  const update = function () {
    api.admin.orderSetting(form.value)
  }

  // 创建时执行
  getSetting()
  // 校验规则
  let engx = /^[1-9]\D*/
  const validNum = function(rule: any, value: any, callback: any){
    if(engx.test(value)){
      callback()
    }else{
      callback(new Error("请输入数字"))
    }
  }
  const rules = reactive<FormRules>({
    flashOrderOvertime:[{required:true,message:"时间不能为空",trigger:"blur"},{validator:validNum,trigger:"blur"}],
    normalOrderOvertime:[{required:true,message:"时间不能为空",trigger:"blur"},{validator:validNum,trigger:"blur"}],
    confirmOvertime:[{required:true,message:"时间不能为空",trigger:"blur"},{validator:validNum,trigger:"blur"}],
    finishOvertime:[{required:true,message:"时间不能为空",trigger:"blur"},{validator:validNum,trigger:"blur"}],
    commentOvertime:[{required:true,message:"时间不能为空",trigger:"blur"},{validator:validNum,trigger:"blur"}],
  })
  // 提交事件
  const submit = function(formEl:IOrdersetting | undefined){
    console.log('提交成功');
    
    formEl.validate((valid)=>{
      if(valid){
        // 提交成功
        ElMessageBox({
          message:"是否要提交修改",
          title:"提示",
          type:"warning",
          showCancelButton:true,
          beforeClose:(action,instance,done)=>{
            if(action==="confirm"){
              update()
              ElMessage({
    message: '提交成功！',
    type: 'success',
  })
            }
            done()
          },
        })
      }
    })
  }
</script>
<style scoped>
.containt{
  width: 100%;
}
.form-self{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 35px 35px 15px 35px;
  width: 720px;
  margin: 40px auto;
}
.el-input{
  width: 200px;
  margin-right: 20px;
}
span{
  color: #303133;
  font-size: 14px;
}
</style>